<template>
	<view class="mall">
		<view class="mall_nav" :style="[style]">
			<view class="nav">
				<u-tabs :list="navList" height='88' active-color='#26C281' inactive-color='#222222' :is-scroll="false" :current="current" @change="navChange"></u-tabs>
			</view>
			<view class="nav_two" v-if="current==0">
				<text :class="twoIndex==index?'active':''" v-for="(item,index) in twoList" :key="index" @click="twoNavBtn(index)">{{item}}</text>
			</view>
			<view class="nav_ss" v-else>
				<view class="ss_input">
					<u-search v-model="keyword" height="64" @change='changeBtn' :show-action="false" placeholder="请输入商品名称"></u-search>
				</view>
				<view class="ss_btn" @click="searchBtn">查询</view>
			</view>
		</view>
		<view style="height: 188rpx;box-sizing: content-box;" :style="[style]"></view>
		<!--  -->
		<view class="mall_main" :style="[mainStyle]">
			<!-- {{JSON.stringify(style)}} -->
			<!-- {{JSON.stringify(mainStyle)}} -->
			<!--  -->
			<GoodsOne ref="goods_one" v-show="current==0"></GoodsOne>
			<!--  -->
			<GoodsTwo ref="goods_two" v-show="current!==0" :list='cateList'></GoodsTwo>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import GoodsOne from '@/components/goods_list/goods_one.vue';
	import GoodsTwo from '@/components/goods_list/goods_two.vue';
	export default {
		components:{
			GoodsOne,
			GoodsTwo
		},
		data() {
			return {
				topNumber:0,
				mainHeight:0,
				// 
				navList:[{
					name: '进货区'
				}, {
					name: '仓储区'
				}, {
					name: '零售区'
				}, {
					name: '提货区'
				}],
				current: 0,
				twoList:['体验区','低价区','中价区','高价区'],
				twoIndex:0,
				keyword:'',
				cateList:[],
			};
		},
		computed:{
			...mapState({
				index: state => state.index
			}),
			style(){
				return {
					paddingTop: this.topNumber+'px'
				}
			},
			mainStyle(){
				return {
					height: this.mainHeight-94-this.topNumber+'px'
				}
			},
		},
		onLoad() {
			// 获取状态栏高度
			uni.getSystemInfo({
				success: (res) => {
					this.topNumber=res.statusBarHeight
					this.mainHeight=res.windowHeight
				}
			})
		},
		onShow() {
			this.$nextTick(function(){
				if(this.index!=this.current || this.current==3){
					this.navChange(this.index)
					this.$store.commit('SET_INDEX',0)
				}else{
					this.current=0
				}
			})
		},
		methods:{
			// cateinfo(){
			// 	var that = this
			// 	that.$httpApi.goodsCate().then((res)=>{
			// 		if(res.code==1){
			// 			that.cateList=res.data
						
			// 		}
			// 	})
			// },
			// nav
			navChange(index){
				this.current=index
				if(index==0){
					this.twoIndex=0
					this.$refs.goods_one.refresh(this.twoIndex)
				}else{
					this.keyword=''
					this.$refs.goods_two.refresh(this.current,this.keyword)
				}
			},
			searchBtn(){
				this.$refs.goods_two.refresh(this.current,this.keyword)
			},
			changeBtn(){
				this.$refs.goods_two.search(this.keyword)
			},
			// two_nav
			twoNavBtn(index){
				if(this.twoIndex==index){
					return
				}
				this.twoIndex=index
				this.$refs.goods_one.refresh(index)
			},
		}
	}
</script>

<style lang="less">
	.mall{
		width: 100%;
		.mall_nav{
			position: fixed;
			top: 0;
			z-index: 10;
			width: 100%;
			background: #fff;
			border-bottom: 1rpx solid #F7F8FA;
			.nav{
				width: 100%;
			}
			.nav_two{
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				text{
					display: block;
					width: 148rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					background: rgba(153,153,153,0.1);
					border-radius: 8rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
				.active{
					color: #26C281;
					background: rgba(38,194,129,0.1);
				}
			}
			.nav_ss{
				width: 100%;
				height: 100rpx;
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.ss_input{
					width: calc(100% - 160rpx);
				}
				.ss_btn{
					width: 132rpx;
					height: 64rpx;
					line-height: 64rpx;
					font-size: 28rpx;
					text-align: center;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					background: #26C281;
					border-radius: 60rpx;
				}
			}
		}
		// 
		.mall_main{
			width: 100%;
		}
	}
	
</style>
